<template>
	<div class="home">
		<header-cont :page="loginstatus=='unlogin'?'':'login'"></header-cont>
		<div class="main">
      <div class="main_left" v-if="loginstatus=='login'">
        <div class="main_left_cont main_left_cont_notice">
          <div class="cont_header">
            <div class="name">
              <img src="@/assets/img/tzgg_title.png"/>
              <!--<span>通知公告</span>-->
            </div>
            <div class="more" @click="moreFn(0)">
              <span>更多</span>
              <img src="@/assets/img/more.png"/>
            </div>
          </div>
          <ul class="cont_list">
            <li @click="viewDetail(item.id)" class="cont_li" v-for="(item, index) in dataList" :key="index">
              <span class="notice_title">{{item.tzggZbt}}</span>
              <span class="notice_date">{{item.createTime}}</span>
            </li>
          </ul>
        </div>
        <div class="main_left_cont main_left_cont_ziliao">
          <div class="cont_header">
            <div class="name">
              <img src="@/assets/img/zlzx_title.png"/>
              <!--<span>资料中心</span>-->
            </div>
            <div class="more" @click="moreFn(1)">
              <span>更多</span>
              <img src="@/assets/img/more.png"/>
            </div>
          </div>
          <ul class="cont_list">
            <li class="cont_li" @click="downloadZl(item.filePath, item.zlMc)"  v-for="(item, index) in zlList" :key="index">
              <span class="notice_title">{{item.zlMc}}</span>
              <span class="notice_date">{{item.createTime}}</span>
            </li>
          </ul>
        </div>
        <!--<div class="main_left_cont main_left_cont_huojiang">
          <div class="cont_header">
            <div class="name">
              <img src="@/assets/img/huojiang.png"/>
              <span>获奖项目查询</span>
            </div>
          </div>
          <div class="search_cont">
            <div class="search_input">
              <div class="input_li">
                <img src="@/assets/img/lines.png"/>
                <input placeholder="请输入项目编号"/>
              </div>
              <div class="input_li">
                <img src="@/assets/img/lines.png"/>
                <input placeholder="请输入项目名称"/>
              </div>
              <div class="input_li">
                <img src="@/assets/img/lines.png"/>
                <input placeholder="请输入完成单位"/>
              </div>
            </div>
            <div class="search_btn">查询</div>
          </div>
        </div>-->
      </div>
			<div class="main_right">
				<div class="main_right_cont main_right_cont_login" v-if="loginstatus=='unlogin'">
					<div class="login_header">
						<a-tabs class="login_type" default-active-key="1" @change="callback">
							<a-tab-pane key="1" tab="密码登录">
                                <div class="passlogin">
                                    <div class="login_info">
                                        <div class="mobile">
                                            <a-input :maxLength="11" v-model="codephone" @keyup.enter.native="loginByCode" placeholder="手机号"/>
                                        </div>
                                        <div class="password mt">
                                            <a-input type="password" v-model="codepwd" @keyup.enter.native="loginByCode" placeholder="密码"/>
                                        </div>
                                        <div class="captcha mt">
                                            <a-input v-model="gapcode" @keyup.enter.native="loginByCode" placeholder="图片验证码"/>
                                            <span class="pointer" @click="getrandomImage">
                                                <img :src="result"/>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="login_set">
                                        <div class="remember">
                                            <a-checkbox :checked="checked" @change="onChange">
                                                记住密码
                                            </a-checkbox>
                                        </div>
                                        <div class="register pointer" @click="toRegister()">立即注册</div>
                                        <!-- <div class="forget pointer" @click="toFindPwd()">忘记密码？</div> -->
                                    </div>
                                    <div class="login_on">
                                        <div class="sign_in pointer" @click="loginByCode">
                                            <span>登录</span>
                                            <img src="@/assets/img/denglu.png"/>
                                        </div>
                                        <!--<div class="other pointer">
                                        <span>其他登录方式：</span>
                                        <img src="@/assets/img/weixinlogin.png"/>
                                        </div>-->
                                    </div>
                                    <div class="support">
                                        <!-- <div class="support_title">技术支持:010-63413753</div> -->
                                        <div class="support_cont">操作说明:请使用IE10以上、360浏览器、Google Chrome浏览器、火狐浏览器等浏览器进行填报。</div>
                                    </div>
                                </div>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="验证码登录">
                                <div class="codelogin">
                                    <div class="login_info">
                                        <div class="mobile">
                                            <a-input :maxLength="11" class="" v-model="yzmphone" placeholder="手机号" @keyup.enter.native="loginByYzm"/>
                                        </div>
                                        <div class="captcha mt">
                                            <a-input class="" v-model="gapcode" placeholder="图片验证码" @keyup.enter.native="loginByYzm"/>
                                            <span class="pointer" @click="getrandomImage">
                                                <img :src="result"/>
                                            </span>
                                        </div>
                                        <div class="vercode mt">
                                            <a-input class="" v-model="identify" placeholder="手机验证码" @keyup.enter.native="loginByYzm"/>
                                            <span class="pointer getCodeBtn" id="getCodeBtn" @click="getCode">获取短信验证码</span>
                                            <span class="downtimecount" id="downtimecount" style="display: none;"></span>
                                        </div>
                                    </div>
                                    <div class="login_set">
                                        <div class="remember">
                                        <!-- <a-checkbox>
                                            记住密码
                                        </a-checkbox> -->
                                        </div>
                                        <!-- <div class="forget pointer" @click="toFindPwd()">忘记密码？</div> -->
                                    </div>
                                    <div class="login_on">
                                        <div class="sign_in pointer" @click="loginByYzm">
                                        <span>登录</span>
                                        <img src="@/assets/img/denglu.png"/>
                                        </div>
                                        <!--<div class="other pointer">
                                        <span>其他登录方式：</span>
                                        <img src="@/assets/img/weixinlogin.png"/>
                                        </div>-->
                                    </div>
                                    <div class="support">
                                        <div class="support_cont">操作说明:请使用IE10以上、360浏览器、Google Chrome浏览器、火狐浏览器等浏览器进行填报。</div>
                                    </div>
                                </div>
                            </a-tab-pane>
						</a-tabs>
						<!-- <div class="register pointer" @click="toRegister()">立即注册</div> -->
						<div class="register pointer" @click="toVerification()">原账号登陆</div>
					</div>
				</div>
				<div class="main_right_cont main_right_cont_enter" v-else>
                    <a-tabs size="large" default-active-key="1">
                        <a-tab-pane key="1">
                            <span slot="tab">成果申报</span>
                            <div class="enter_cont">
                                <ul>
                                    <li @click="handleResult(item.fl_bh, item.fl_mc, item)" v-for="(item, index) in cxjsbList" :key="index" :class="['pointer',index==0?'technology':index==1?'administration':index==2?'information':index==3?'standard':index==4?'patent':'']">
                                        <div class="port_tit">{{ item.fl_mc }}</div>
                                        <div class="port_time">
                                            <p>申报开始时间：{{ item.is_valid === 'Y' ? item.sb_kssj.slice(0,10) : '待定' }}</p>
                                            <p>申报结束时间：{{ item.is_valid === 'Y' ? item.sb_jzsj.slice(0,10) : '待定' }}</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="2">
                            <span slot="tab">成果推荐</span>
                            <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
                                <a-form-item>
                                    <a-input size="large"
                                        v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
                                        type="text" placeholder="请输入帐户名">
                                        <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                    </a-input>
                                </a-form-item>
                                <a-form-item>
                                    <a-input v-decorator="['password',validatorRules.password]" size="large" type="password"
                                        autocomplete="false" placeholder="密码">
                                        <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                    </a-input>
                                </a-form-item>
                                <a-row :gutter="0">
                                    <a-col :span="16">
                                        <a-form-item>
                                            <a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large" type="text"
                                                @change="inputCodeChange" placeholder="请输入验证码">
                                                <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                            </a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="8" style="text-align: right">
                                        <img v-if="requestCodeSuccess" class="codeimg" :src="randCodeImage"
                                            @click="handleChangeCheckCode" />
                                        <img v-else class="codeimg" src="../../../assets/checkcode.png"
                                            @click="handleChangeCheckCode" />
                                    </a-col>
                                </a-row>
                                <a-form-item>
                                    <a-checkbox
                                        v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
                                </a-form-item>
                                <a-form-item>
                                    <a-button
                                        size="large"
                                        type="primary"
                                        htmlType="submit"
                                        class="login-button"
                                        :loading="loginBtn"
                                        @click.stop.prevent="handleSubmitTjdw"
                                        :disabled="loginBtn"
                                    >确定</a-button>
                                </a-form-item>
                            </a-form>
                            <!-- <div class="enter_cont">
                                <ul class="sbrk">
                                    <li @click="handelZjKjcxj1">
                                        <b style="font-size:22px;">技术、系统、标准、信息化成果登录</b>
                                        <img src="../../../assets/img/1.png" alt="">
                                    </li>
                                    <li @click="handelZgZjcxj1">
                                        <b style="font-size:22px;">职工成果登录</b>
                                        <img src="../../../assets/img/2.png" alt="">
                                    </li>
                                </ul>
                            </div> -->
                        </a-tab-pane>
                        <a-tab-pane key="3">
                            <span slot="tab">专家评审</span>
                            <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
                                <div name="短信登录" lable="短信登录" v-if="zjLoginType === 'phone'">
                                    <a-form-item>
                                        <a-input v-decorator="['mobile',validatorRules.mobile]" size="large" type="text"
                                            placeholder="手机号" :maxLength="11">
                                            <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                        </a-input>
                                    </a-form-item>
                                    <a-row :gutter="0">
                                        <a-col :span="16">
                                            <a-form-item>
                                                <a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large"
                                                    type="text" @change="inputCodeChange" placeholder="请输入验证码">
                                                    <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                                </a-input>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8" style="text-align: right">
                                            <img v-if="requestCodeSuccess" class="codeimg" style="width:100%;cursor:pointer;"
                                                :src="randCodeImage" @click="handleChangeCheckCode" />
                                            <img v-else class="codeimg" src="../../../assets/checkcode.png"
                                                @click="handleChangeCheckCode" />
                                        </a-col>
                                    </a-row>
                                    <a-form-item style="position:relative;">
                                        <a-input v-decorator="['captcha',validatorRules.captcha]" size="large" type="text"
                                            placeholder="请输入验证码">
                                            <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                        </a-input>
                                        <a-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn"
                                            @click.stop.prevent="getCaptcha"
                                            type="link"
                                            v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
                                        <a class="forge-password" style="float: right;" value="账号登录" @click="handleAccountLogin">
                                            账号登录
                                        </a>
                                    </a-form-item>
                                </div>
                                <div name="账号登录" lable="账号登录" v-else>
                                    <a-form-item>
                                        <a-input size="large"
                                            v-decorator="['username_zj',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
                                            type="text" placeholder="请输入帐户名">
                                            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                        </a-input>
                                    </a-form-item>

                                    <a-form-item>
                                        <a-input v-decorator="['password_zj',validatorRules.password]" size="large" type="password"
                                            autocomplete="false" placeholder="密码">
                                            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                        </a-input>
                                    </a-form-item>
                                    <a-row :gutter="0">
                                        <a-col :span="16">
                                            <a-form-item>
                                                <a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large"
                                                    type="text" @change="inputCodeChange" placeholder="请输入验证码">
                                                    <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                                </a-input>
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8" style="text-align: right">
                                            <img v-if="requestCodeSuccess" class="codeimg" :src="randCodeImage"
                                                @click="handleChangeCheckCode" />
                                            <img v-else class="codeimg" src="../../../assets/checkcode.png"
                                                @click="handleChangeCheckCode" />
                                        </a-col>
                                    </a-row>
                                    <a-form-item>
                                        <a-checkbox
                                            v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
                                        <a class="forge-password" style="float: right;" value="短信登录" @click="handleAccountLogin">
                                            短信登录
                                        </a>
                                    </a-form-item>
                                </div>
                                <a-form-item>
                                    <a-button
                                        size="large"
                                        type="primary"
                                        htmlType="submit"
                                        class="login-button"
                                        :loading="loginBtn"
                                        @click.stop.prevent="handleSubmitZj"
                                        :disabled="loginBtn"
                                    >确定</a-button>
                                </a-form-item>
                            </a-form>
                            <!-- <div class="enter_cont">
                                <ul class="sbrk">
                                    <li @click="handelZjKjcxj">
                                        <b style="font-size:22px;">技术、系统、标准、信息化成果专家登录</b>
                                        <img src="../../../assets/img/1.png" alt="">
                                    </li>
                                    <li @click="handelZgZjcxj">
                                        <b style="font-size:22px;">职工成果专家登录</b>
                                        <img src="../../../assets/img/2.png" alt="">
                                    </li>
                                </ul>
                            </div> -->
                        </a-tab-pane>
                    </a-tabs>
				</div>
				<!--<div class="main_right_cont main_right_cont_set">
					<div class="cont_header">
						<div class="name">
							<img src="@/assets/img/set.png"/>
							<span>奖项设置</span>
						</div>
					</div>
					<div class="set_cont">
						电力创新奖实行分类评审。（1）电力科技创新奖：包括技术、信息化、标准、管理、专利五类成果；（2）电力职工技术创新奖。电力创新奖设三个奖励等级，其中电力科技创新奖设大奖、一等奖、二等奖，电力职工技术创新奖设一等奖、二等奖、三等奖。
					</div>
				</div>-->
			</div>
		</div>
		<footer-cont></footer-cont>
        <achievements ref="achievements" :zlTime="zl_time" :flMc="fl_mc" :flBh="fl_bh" :flag="achievementsFlag" @declareAchievements="declareAchievements"/>
	</div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
import achievements from '@/views/declarationSystem/achievements/index';
import {
    cxjsbPageList,
    sysCxjZlList,
    randomImage,
    cxjsb_getYzm,
    cxjsb_UserLogin,
    cxjsb_UserYzmLogin,
    sysCxjFlCxjsbList,
    cxjsbCheckFlSbsj,
    cxjsbAdd,
	sysCxjZlDownload
} from '@/api/shenbao';
import { getAction } from '@/api/manage';
import { mapActions } from "vuex";
import {
    INDEX_MAIN_PAGE_PATH
} from '@/store/mutation-types'
var timer, curCount = 60;
function setCountDown() {
    if (curCount === 0) {
		curCount = 60;
        window.clearInterval(timer);
        document.getElementById('getCodeBtn').style.display="block";
        document.getElementById('downtimecount').style.display="none";
    } else {
        curCount--;
        document.getElementById('downtimecount').style.display="block";
        document.getElementById('getCodeBtn').style.display="none";
        document.getElementById('downtimecount').innerHTML = "请在"+curCount+"秒内输入验证码";
    }
}
export default {
    name: 'Login',
    components: {
        headerCont,
        footerCont,
        achievements,
    },
    data() {
        const validateMobile = (rule, value, callback) => {
            if (!value) {
                callback("请输入手机号");
            } else if (!new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
                callback("您的手机号格式不正确!");
            } else {
                callback();
            }
        }
        return {
            loginstatus: 'unlogin',
            logintype: true,
            passtype:'',
            codetype: '',
            achievementsFlag: false,
            dataList: [],
            zlList: [],
            key: "",
            result: '',
            codephone: '',
            codepwd: '',
            reg: /^1[3456789]\d{9}$/,
            yzmphone: '',
            gapcode: '',
            identify: '',
            cxjsbList: [],
            fl_bh: '',
            fl_mc: '',
            zl_time: "",
			      checked: false,
            randCodeImage: '',
            requestCodeSuccess: false,
            loginBtn: false,
            form: this.$form.createForm(this),
            zjLoginType: "username",
            state: {
                time: 60,
                smsSendBtn: false,
            },
            validatorRules: {
                username: {
                    rules: [{
                        required: true,
                        message: '请输入用户名!'
                    }, {
                        validator: this.handleUsernameOrEmail
                    }]
                },
                password: {
                    rules: [{
                        required: true,
                        message: '请输入密码!',
                        validator: 'click'
                    }]
                },
                mobile: {
                    rules: [{
                        validator: validateMobile
                    }]
                },
                captcha: {
                    rule: [{
                        required: true,
                        message: '请输入验证码!'
                    }]
                },
                inputCode: {
                    rules: [{
                        required: true,
                        message: '请输入验证码!'
                    }]
                }
            },
        }
    },
    mounted() {
		var islogin = sessionStorage.getItem('islogin');
        if (islogin == '1') {
            this.loginstatus = 'login';
            this.getSysCxjFlCxjsbList();
        } else {
			var shenbao_phoneNumber = localStorage.getItem('shenbao_phoneNumber');
			var shenbao_passWord = localStorage.getItem('shenbao_passWord');
			if (shenbao_phoneNumber && shenbao_passWord) {
				this.codephone = shenbao_phoneNumber;
				this.codepwd = shenbao_passWord;
				this.checked = true;
			}
            this.loginstatus = 'unlogin';
        }
        this.rendertype();
        this.getList();
        this.getZlList();
        this.getrandomImage();
        this.handleChangeCheckCode();
    },
    methods: {
        ...mapActions(['TjdwUserLogin', 'ZjUserYzmLogin', 'zjlogin']),
        handleAccountLogin() {
            if (this.zjLoginType == 'username') {
                this.zjLoginType = 'phone'
            } else {
                this.zjLoginType = 'username'
            }
        },
        getCaptcha(e) {
            e.preventDefault();
            let that = this;
            this.form.validateFields(['mobile'], {
                force: true
            }, (err, values) => {
                if (!values.mobile) {
                    that.cmsFailed("请输入手机号");
                } else if (!err) {
                    this.state.smsSendBtn = true;
                    let interval = window.setInterval(() => {
                        if (that.state.time-- <= 0) {
                            that.state.time = 60;
                            that.state.smsSendBtn = false;
                            window.clearInterval(interval);
                        }
                    }, 1000);
                    const hide = this.$message.loading('验证码发送中..', 0);
                    let smsParams = {};
                    smsParams.phoneNumber = values.mobile;
                    smsParams.code = that.inputCodeContent;
                    smsParams.key = that.currdatetime;
                    smsParams.type = "5";
                    getAction("/cxj/sysCxjUser/cxjsb_getYzm", smsParams).then(res => {
                        if (!res.success) {
                            setTimeout(hide, 0);
                            this.cmsFailed(res.message);
                        }
                        //   console.log(res);
                        setTimeout(hide, 500);
                    }).catch(err => {
                        setTimeout(hide, 1);
                        clearInterval(interval);
                        that.state.time = 60;
                        that.state.smsSendBtn = false;
                        this.requestFailed(err);
                    });
                }
            });
        },
        handleSubmitTjdw() {
            let that = this;
            that.loginBtn = true;
            that.form.validateFields(['username', 'password', 'inputCode', 'rememberMe'], {
                force: true
            }, async (err, values) => {
                if (err) {
                    that.loginBtn  = false;
                    return;
                }
                try {
                    const loginParams = {
                        userName: values.username,
                        passWord: this.passwordEncryption(values.password),
                        remember_me: values.rememberMe,
                        code: that.inputCodeContent,
                        key: that.currdatetime
                    };
                    const res = await this.TjdwUserLogin(loginParams);
                    that.loginBtn = false;
                    sessionStorage.setItem('role',  1);
                    sessionStorage.setItem('userName',  res.result.userInfo.userName);
                    that.$router.push({ path: INDEX_MAIN_PAGE_PATH });
                } catch (error) {
                    that.requestFailed(error);
                    that.loginBtn = false;
                }
            })
        },
        handleSubmitZj() {
            let that = this;
            that.loginBtn = true;
            if (that.zjLoginType == 'phone') {
                that.form.validateFields(['mobile', 'captcha', 'inputCode', 'rememberMe'], {
                    force: true
                }, async (err, values) => {
                    if (err) {
                        that.loginBtn = false;
                        return;
                    }
                    try {
                        const loginParams = {
                            remember_me: values.rememberMe,
                            key: that.currdatetime,
                            phoneNumber: values.mobile,
                            code: values.captcha
                        };
                        const res = await this.ZjUserYzmLogin(loginParams);
                        that.loginBtn = false;
                        sessionStorage.setItem('role', 3)
                        sessionStorage.setItem('userName', res.result.userInfo.userName)
                        that.$router.push({ path: INDEX_MAIN_PAGE_PATH });
                    } catch (error) {
                        that.loginBtn = false;
                        that.requestFailed(error);
                    }
                })
            } else {
                that.form.validateFields(['username_zj', 'password_zj', 'inputCode', 'rememberMe'], {
                    force: true
                }, async (err, values) => {
                    if (err) {
                        that.loginBtn = false;
                        return;
                    }
                    try {
                        const loginParams = {
                            userName: values.username_zj,
                            passWord: this.passwordEncryption(values.password_zj),
                            remember_me: values.rememberMe,
                            code: that.inputCodeContent,
                            key: that.currdatetime
                        };
                        const res = await this.zjlogin(loginParams);
                        that.loginBtn = false;
                        sessionStorage.setItem('role', 3)
                        sessionStorage.setItem('userName', res.result.userInfo.userName)
                        that.$router.push({ path: INDEX_MAIN_PAGE_PATH });
                    } catch (error) {
                        that.loginBtn = false;
                        that.requestFailed(error);
                    }
                })
            }
        },
        requestFailed(err) {
            this.$notification['error']({
                message: '登录失败',
                description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
                duration: 4,
            });
            this.loginBtn = false;
        },
        cmsFailed(err) {
            this.$notification['error']({
                message: "登录失败",
                description: err,
                duration: 4,
            });
        },
        handleChangeCheckCode() {
            this.currdatetime = new Date().getTime();
            getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
                if (res.success) {
                    this.randCodeImage = res.result
                    this.requestCodeSuccess = true
                } else {
                    this.$message.error(res.message)
                    this.requestCodeSuccess = false
                }
            }).catch(() => {
                this.requestCodeSuccess = false
            })
        },
        inputCodeChange(e) {
            this.inputCodeContent = e.target.value
        },
        handleUsernameOrEmail(rule, value, callback) {
            const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            if (regex.test(value)) {
                this.loginType = 0
            } else {
                this.loginType = 1
            }
            callback()
        },
        // 专家登录
        handelZjKjcxj() {
            // this.$router.push('/shenbao/exportLogin')
            window.open("https://cxj.cec.org.cn/user/zj", '_blank')
        },
        // 职工创新奖登录【专家】
        handelZgZjcxj() {
            // 申报登录入口
            window.open("https://zgcgps.cec.org.cn", '_blank')
        },
        // 推荐单位 - 电力科技创新奖登录
        handelZjKjcxj1() {
            window.open("https://cxj.cec.org.cn/user/tjdw", '_blank')
        },
        // 推荐单位 - 电力职工技术创新奖登录
        handelZgZjcxj1() {
            window.open("https://zgcgps.cec.org.cn", '_blank')
        },
		onChange(e) {
			this.checked = e.target.checked;
		},
        declareAchievements(formData){
            let that = this;
            cxjsbAdd(formData).then(res=>{
                let data = res.data;
                if (data.success) {
                    that.achievementsFlag = !that.achievementsFlag;
                    that.$refs.achievements.handleCancel();
                    that.$message.success('添加成功');
                    that.$router.push({
                        path: '/shenbao/declare',
                        query: {
                            type: that.fl_bh,
                            cxj_cxj_id: data.result.id,
                            isHead: 1,
                            cxj_xmbh: data.cxj_xmbh,
                            cxj_mc_zw: data.cxj_mc_zw
                        }
                    })
                } else {
                    that.$message.error(res.data.message);
                }
            })
        },
        changeMethod() {
            this.gapcode = '';
            this.getrandomImage();
            this.logintype = !this.logintype;
            this.rendertype()
        },
        rendertype() {
            if (this.logintype) {
                this.passtype = '密码登录';
                this.codetype = '验证码登录';
            }else {
                this.passtype = '验证码登录';
                this.codetype = '密码登录';
            }
        },
      callback(key) {
        console.log(key, this.loginBtn);
        this.loginBtn = false;
      },
        moreFn(ind){
            this.$router.push('/shenbao/articleList?ind='+ind)
        },
        toRegister() {
            this.$router.push('/shenbao/register')
        },
		toVerification() {
            this.$router.push('/verification')
		},
        toFindPwd() {
            this.$router.push('/shenbao/findpwd')
        },
        // 获取申报列表
        getList(){
            cxjsbPageList().then(res=>{
                if(res.data.success){
                    this.dataList = res.data.result.records;
                }
            })
        },
        // 获取资料中心列表
        getZlList(){
            sysCxjZlList().then(res=>{
                if(res.data.success){
                    this.zlList = res.data.result.records;
                }
            })
        },
        // 跳转详情
        viewDetail(id){
            this.$router.push({
                path: '/shenbao/innovationAwardNotice',
                query: {
                    id
                }
            })
        },
        getrandomImage() {
            let that = this;
            this.key = new Date().getTime();
            randomImage(that.key).then(res=>{
                that.result = res.data.result;
            })
        },
        getCode() {
            let that = this;
            if (!this.yzmphone) {
                that.$message.warning('请输入手机号');
                return
            }
            if(!this.reg.test(this.yzmphone)) {
                that.$message.warning('手机号格式不正确');
                return
            }
            if(!this.gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            cxjsb_getYzm({
                code: that.gapcode,
                key: that.key,
                phoneNumber: that.yzmphone,
                type: 1
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('发送成功');
                    timer = window.setInterval(setCountDown, 1000);
                } else {
                    that.getrandomImage();
                    that.$message.error(res.data.message);
                }
            })
        },
        loginByYzm() {
            let that = this;
            if (!this.yzmphone) {
                that.$message.warning('请输入手机号');
                return
            }
            if(!this.gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            if (!this.identify) {
                that.$message.warning('请输入手机验证码');
                return
            }
            cxjsb_UserYzmLogin({
                code: that.identify,
                phoneNumber: that.yzmphone
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('登录成功');
                    that.getSysCxjFlCxjsbList();
                    that.loginstatus = 'login';
                    sessionStorage.setItem('islogin', 1);
                    sessionStorage.setItem('logindata', JSON.stringify(res.data.result));
                    sessionStorage.setItem('token', res.data.result.token);
                } else {
        			that.getrandomImage();
                    that.$message.warning(res.data.message);
                }
            })
        },
        passwordEncryption(passwordUser) {
            //后台公钥
            let publicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhkx+lJeZ2KbV+CZ2cFG2MpksTWPTyi3hQt+5Cb1S2NPSdT+1p3tkcO1+YRi2yHvmGsR58of3obr6ygHAMnLVB0+/1daHzY5FDNRb27sJuOEqD3Q1RiYAQfeYmxuEyM4g0TA2X4zkYeLFbKF8suhOVpMa+dp0TnLUA31eyxv+bDhY38T3xtgrJZxHZ2r28ncpdEHF2NNxK0nfAWBJnfcfs/35ESQtY4t2ExHEXRIQUZ2XBh1V9nM4PM2LlJy1xruN2tcTbFKFSJHrMp+Zso0iJJlD+qGISDOeLFGD/dETtqmLkmIJnsz0ARbos/mwAP0gc9Hd5mTpi8RSi8Px5dA26QIDAQAB'
            let encryptor = new JSEncrypt();
            encryptor.setPublicKey(publicKey);
            let passwordEncryp = encryptor.encrypt(passwordUser);
            return passwordEncryp;
        },
        loginByCode() {
            var that = this;
            if (!this.codephone) {
                that.$message.warning('请输入手机号');
                return
            }
            if(!this.reg.test(this.codephone)) {
                that.$message.warning('手机号格式不正确');
                return
            }
            if (!this.codepwd) {
                that.$message.warning('请输入密码');
                return
            }
            let data = {
                code: that.gapcode,
                key: that.key,
                passWord: that.codepwd,
                //passWord: that.passwordEncryption(that.codepwd),
                phoneNumber: that.codephone
            }
            console.log('data=====', data);
            cxjsb_UserLogin(data).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('登录成功');
                    that.getSysCxjFlCxjsbList();
                    that.loginstatus = 'login';
                    sessionStorage.setItem('islogin', 1);
                    sessionStorage.setItem('logindata', JSON.stringify(res.data.result));
                    sessionStorage.setItem('token', res.data.result.token);
					if(that.checked) {
						localStorage.setItem('shenbao_phoneNumber', that.codephone);
						localStorage.setItem('shenbao_passWord', that.codepwd);
					} else {
						localStorage.removeItem('shenbao_phoneNumber');
						localStorage.removeItem('shenbao_passWord');
					}
                } else {
        			that.getrandomImage();
                    that.$message.warning(res.data.message);
                }
            })
        },
        getSysCxjFlCxjsbList(){
            sysCxjFlCxjsbList().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.cxjsbList = data.result;
                }
            }).catch(err=>{
				sessionStorage.clear();
				this.loginstatus = 'unlogin';
			})
        },
        handleResult(id, fl_mc, item){
            let self = this;
            self.fl_bh = id;
            self.fl_mc = fl_mc;
            self.zl_time = item.sbnd;
			// if (id == '61') {
            //     window.open("https://zgcg.cec.org.cn/", '_blank')
            // } else {
				self.$confirm({
					title: `您当前选择的是${fl_mc}，请谨慎选择申报类别，一经确定后类别无法更改！`,
					onOk() {
						cxjsbCheckFlSbsj({
							fl_bh: id
						}).then(res=>{
							let data = res.data;
							if (data.success){
								if (data.result) {
									self.achievementsFlag = !self.achievementsFlag;
								} else {
									self.$message.warning('当前日期不在申报范围内');
								}
							} else {
								self.$message.warning(data.message);
							}
						})
					},
					onCancel() {
						console.log('Cancel');
					},
					class: 'test',
				});
			// }
        },
		downloadZl(url, zlMc){
			let that = this;
			let fileGs = url.split('.');
            sysCxjZlDownload(url).then(res=>{
                that.downfn(zlMc,res,fileGs[1]);
            })
        },
		downfn(title, res, fileGs) {
            const data = res.data;
            const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
            // const url = window.URL.createObjectURL(new Blob([data], {type: "application/octet-stream"}))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url;
            link.setAttribute('download', title+'.'+ fileGs)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        }
    }
}
</script>

<style lang="less" scoped>

.home {
	width: 100%;
	background: #F7F7F7;
}
.header {
	width: 100%;
	position: relative;
}
.header_cont {
	width:1210px;
	margin: 0 auto;
	position: relative;
	top: 25px;
	display: flex;
	.logo {
		display: flex;
		align-items: flex-start;
	}
	.title {
		font-size: 36px;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		color: #FFFFFF;
		line-height: 50px;
		margin-left: 9px;
		padding-top: 22px;
		box-sizing: border-box;
	}
}
.main {
	width: 1220px;
	margin: 0 auto;
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 20px;
}
.main_left {
	width: 685px;
}
.cont_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #EEEEEE;
	padding-left: 30px;
	padding-right: 32px;
	box-sizing: border-box;
	height: 52px;
	.name {
		height: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #6BD2FE;
		span {
			margin-left: 11px;
			font-size: 16px;
			font-family: '微软雅黑','Microsoft YaHei','PingFangSCRegular';
      font-weight: bold;
			color: #333333;
			line-height: 22px;
		}
	}
	.more {
		cursor: pointer;
		display: flex;
		align-items: center;
		span {
			margin-right: 8px;
			font-size: 16px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			color: #006DC0;
			line-height: 22px;
		}
	}
}
.main_left_cont {
	width: 685px;
	background: #FFFFFF;
	&.main_left_cont_notice {
		height: 306px;
	}
	&.main_left_cont_ziliao {
		height: 306px;
		margin-top: 20px;
	}
	&.main_left_cont_huojiang {
		height: 220px;
		margin-top: 20px;
	}
	.cont_list {
		padding-left: 18px;
		padding-right: 32px;
		box-sizing: border-box;
        height: 248px;
        overflow: hidden;
		.cont_li {
			height: 48px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #EEEEEE;
			cursor: pointer;
			.notice_title {
				font-size: 16px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				color: #4C5F82;
				line-height: 22px;
			}
			.notice_date {
				height: 22px;
				font-size: 16px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				color: #4B5F82;
				line-height: 22px;
			}
		}
	}
	.search_cont {
		.search_input {
			display: flex;
			align-items: center;
			padding-left: 27px;
			padding-right: 33px;
			margin-top: 20px;
			.input_li {
				width: 195px;
				height: 50px;
				border-radius: 4px;
				position: relative;
				img {
					position: absolute;
					top: 16px;
					left: 15px;
				}
				input {
					width: 100%;
					height: 100%;
					text-indent: 23px;
					border: 1px solid #ECEBEB;
				}
				&:nth-of-type(1) {
					margin-right: 20px;
				}
				&:nth-of-type(2) {
					margin-right: 20px;
				}
			}
		}
		.search_btn {
			width: 160px;
			height: 46px;
			background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
			border-radius: 5px;
			font-size: 22px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			color: #FFFFFF;
			line-height: 46px;
			text-align: center;
			margin: 20px auto 0;
			cursor: pointer;
		}
	}
}
.main_right {
	width: 506px;
    margin: 0 auto;
	.main_right_cont {
		width: 506px;
		background: #FFFFFF;
		&.main_right_cont_login {
			height: 632px;
			padding: 0 36px;
			box-sizing: border-box;
		}
		&.main_right_cont_enter {
			height: 632px;
			padding: 0 31px 0 37px;
			box-sizing: border-box;
		}
		&.main_right_cont_set {
			height: 220px;
			margin-top: 20px;
		}
	}
	.login_header {
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
        position: relative;
		.login_type {
			span {
				height: 28px;
				font-size: 20px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				color: #999999;
				line-height: 28px;
				&.active {
					height: 48px;
					font-size: 20px;
					font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 48px;
				}
				&:nth-of-type(1) {
					margin-right: 16px;
				}
			}
		}
		.register {
			height: 28px;
			font-size: 20px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			color: #006DC0;
			line-height: 28px;
			margin-top: 16px;
            position: absolute;
            right: 10px;
		}
	}
    /deep/ .ant-tabs-tab {
        font-size: 20px;
    }
	.login_info {
		input {
			width: 434px;
			height: 50px;
			border-radius: 4px;
			border: 1px solid #ECEBEB;
			text-indent: 20px;
			font-size: 20px;
			color:#333333;
		}
		.captcha {
			display: flex;
			justify-content: space-between;
			align-items: center;
			input {
				width: 293px;
			}
			span {
				width: 127px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				// border:1px solid #f7f7f7;
				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
		.vercode {
			position: relative;
			span {
				position: absolute;
				right: 22px;
				top:13px;
				font-size: 18px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				font-weight: 400;
				color: #006DC0;
				&.downtimecount {
					color: #999;
				}
			}
		}
		.mt {
			margin-top: 20px;
		}
	}
	.login_set {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.remember {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.selected {
				width: 18px;
				height: 18px;
				border: 1px solid #ECECEB;
				border-radius: 50%;
			}
			span {
				height: 23px;
				font-size: 16px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				color: #666666;
				line-height: 22px;
				margin-left: 11px;
			}
		}
		.forget {
			height: 23px;
			font-size: 16px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			font-weight: 400;
			color: #006DC0;
			line-height: 22px;
		}
	}
	.login_on {
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.sign_in {
			width: 434px;//216px
			height: 54px;
			background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				font-size: 22px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				color: #FFFFFF;
			}
			img {
				margin-left: 11px;
			}
		}
		.other {
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				height: 23px;
				font-size: 16px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				font-weight: 400;
				color: #666666;
				line-height: 22px;
			}
			img {
				margin-left: 4px;
				width: 30px;
				height: 30px;
			}
		}
	}
	.support {
		margin-top: 28px;
		border-top: 1px solid #EEEEEE;
		.support_title {
			margin-top: 25px;
			height: 25px;
			font-size: 22px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			font-weight: 500;
			color: #006DC0;
			line-height: 30px;
		}
		.support_cont {
			width: 445px;
			height: 53px;
			font-size: 16px;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			font-weight: 400;
			color: #999999;
			line-height: 26px;
			margin-top: 26px;
		}
	}
	.set_cont {
		margin: 20px auto 0;
		width: 434px;
		height: 130px;
		font-size: 16px;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-weight: 400;
		color: #333;
		text-indent: 2em;
		line-height: 26px;
	}
	.enter_tit {
		font-size: 30px;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-weight: 500;
		color: #0a4174;
		line-height: 48px;
		padding-top: 20px;
	}
    .sbrk {
        width: 100%;
        height: auto;
        justify-content: space-between;

        li {
            position: relative;
            width: 400px !important;
            height: 140px !important;
            background-color: #2680eb;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            // margin-top: 40px;
            margin-bottom: 60px;

            &:nth-child(1) {
                // background: #2680eb;
                background: url('../../../assets/img/bg2.png') no-repeat;
                background-size: auto 100%;
            }

            &:nth-child(2) {
                background: url('../../../assets/img/bg1.png') no-repeat;
                background-size: auto 100%;
            }

            b {
                text-align: center;
                font-size: 30px;
                font-weight: normal;
                color: #ffffff;
                padding-right: 60px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }

            img {
                width: 80px;
                height: 80px;
                position: absolute;
                right: 20px;
                top: 32px;
            }
        }
    }
}
.ant-form-item {
	margin-bottom: 10px;
}

.enter_cont {
    margin-top: 22px;
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom:0;
        li {
            width: 213px;
            height: 130px;
            border-radius: 5px;
            opacity: 0.9;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing: border-box;
            margin-bottom: 12px;
            .port_tit {
                height: 28px;
                font-size: 20px;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 28px;
            }
            .port_time {
                margin-top: 19px;
                p {
                    height: 17px;
                    font-size: 12px;
                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 17px;
                }
            }
            &.technology {
                background: #0291FE;
            }
            &.administration {
                background: #FF8E75;
            }
            &.information {
                background: #5E5DF8;
            }
            &.standard {
                background: #30D499;
            }
        }
    }
    .patent {
        width: 438px;
        height: 130px;
        background: #FAB81E;
        border-radius: 5px;
        opacity: 0.9;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 36px;
        box-sizing: border-box;
        .port_time {
            display: flex;
            justify-content: space-between;
        }
        .patent_tit {
            height: 28px;
            font-size: 20px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 28px;
        }
        .patent_time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            p {
                height: 17px;
                font-size: 12px;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 17px;
            }
        }
    }
}


/deep/.user-layout-login {
    button.login-button {
        width: 434px;
        height: 54px;
        background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
        border-radius: 5px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
.codeimg {
    width: 100%;
    cursor: pointer;
}
.getCaptcha {
    position: absolute;
    right: 3px;
    top: -6px;
    color: #006DC0;
    font-size: 16px;
}
/deep/.ant-form-item {
    margin-bottom: 24px;
}
</style>
